<template>
	<div class="clips_comment_selected">
		<!-- 选集开始 -->
		<div class="comment_selected_episode" v-for="data in selectedData" key='index'>

			<div class="selected_episode_img">

			</div>
			<div class="selected_episode_content">
				<h2>{{data.title}}</h2>
				<p>{{data.content}}</p>
			</div>
			<div class="clear"></div>
		</div>

	</div>
</template>

<script>
	// require('../../../less/clips/clips_comment_selected.less');
	export default {

		name: 'clips',

		data() {

			return {

				selectedData: [

					{
						title: '第一集',
						content: '简介：电影讲述，失恋男姜义哲，不慎误入游乐园魔法世界，在这段奇妙旅程中与公主安洁西之间产生了纯美恋情的故事。该片力求通过这段带有魔幻色彩的浪漫爱情，深入人们的内心，探索关于爱情的真谛。'
					},
					{
						title: '第二集',
						content: '简介：电影讲述，失恋男姜义哲，不慎误入游乐园魔法世界，在这段奇妙旅程中与公主安洁西之间产生了纯美恋情的故事。该片力求通过这段带有魔幻色彩的浪漫爱情，深入人们的内心，探索关于爱情的真谛。'
					},
					{
						title: '第三集',
						content: '简介：电影讲述，失恋男姜义哲，不慎误入游乐园魔法世界，在这段奇妙旅程中与公主安洁西之间产生了纯美恋情的故事。该片力求通过这段带有魔幻色彩的浪漫爱情，深入人们的内心，探索关于爱情的真谛。'
					},
					{
						title: '第四集',
						content: '简介：电影讲述，失恋男姜义哲，不慎误入游乐园魔法世界，在这段奇妙旅程中与公主安洁西之间产生了纯美恋情的故事。该片力求通过这段带有魔幻色彩的浪漫爱情，深入人们的内心，探索关于爱情的真谛。'
					},
					{
						title: '第五集',
						content: '简介：电影讲述，失恋男姜义哲，不慎误入游乐园魔法世界，在这段奇妙旅程中与公主安洁西之间产生了纯美恋情的故事。该片力求通过这段带有魔幻色彩的浪漫爱情，深入人们的内心，探索关于爱情的真谛。'
					},
					{
						title: '第六集',
						content: '简介：电影讲述，失恋男姜义哲，不慎误入游乐园魔法世界，在这段奇妙旅程中与公主安洁西之间产生了纯美恋情的故事。该片力求通过这段带有魔幻色彩的浪漫爱情，深入人们的内心，探索关于爱情的真谛。'
					},
				]

			}

		}

	}
</script>
<style type="text/css" lang='less' scoped>
	.clips_comment_selected {
		margin-top: 10/64rem;
		.comment_selected_episode {
			.selected_episode_img {
				height: 140/64rem;
				width: 220/64rem;
				background: url('../../../../static/images/15/selected_episode_img.jpg') no-repeat;
				background-size: 220/64rem 140/64rem;
				margin-left: 20/64rem;
				float: left;
			}
			.selected_episode_content {
				float: left;
				margin-top: -6/64rem;
				margin-left: 15/64rem;
				width: 360/640*100%;
				height: 140/64rem;
				overflow: hidden;
				h2 {
					font-size: 26/64rem;
					color: #a54be8;
				}
				p {
					color: #959595;
					font-size: 24/64rem;
					/*margin-top:10/64rem;*/
				}
			}
			padding: 10/64rem 0 10/64rem 0;
			width:(640-40)/640*100%;
			margin: 0 auto;
			border-bottom:1/64rem solid #ddd;
			&:last-child {
				border-bottom: 0;
			}
		}
	}
	
	.clear {
		clear: both;
	}
	
	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}
	
	body {
		line-height: 1;
	}
	
	ol,
	ul {
		list-style: none;
	}
	
	blockquote,
	q {
		quotes: none;
	}
	
	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	a {
		text-decoration: none;
	}
	
	body {
		font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
		font-size: 25/64rem;
		color: #444;
	}
</style>